<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/8
  Time: 下午 01:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>WMS-演示版</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/iframeTools.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jQueryForm.js"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script type="text/javascript">
        $(function () {
            //把当前表单做成ajax表单
            $("#editForm").ajaxForm(function (data) {
                if (data.success) {
                    showDialog("操作成功", function () {
                       location.href = "/stockIncomeBill/list.do";
                    });
                }
            });
            //给日历显示框添加日历显示效果
            $(".Wdate").click(function () {
                WdatePicker({
                    readOnly : true, //设置为只读
                    maxDate : new Date() //最大时间
                });
            });

            //点击添加明细
            $(".appendRow").click(function () {
                //获取到第一行的表格,克隆,设置里面的数据为空
                var tr = $("#edit_table_body tr:first").clone(true);
                tr.find("input").val("");
                tr.find("span").html("");
                tr.appendTo("#edit_table_body");
            });

            //动态事件绑定
            $("#edit_table_body")
                .on("click", ".removeItem", function () {
                //删除明细
                var tr = $(this).closest("tr");
                //如果是第一条数据,清空里面的数据,如果不是,直接删除
                if ($("#edit_table_body tr").size() == 1) {
                    tr.find("input").val("");
                    tr.find("span").html("");
                    return;
                }
                tr.remove();
                })
                
                .on("blur", "input[tag='costPrice'], input[tag='number']", function () {
                    //计算小计
                    //拿到当前的行
                    var tr = $(this).closest("tr");
                    //拿到当前行所在的数据
                    var costPrice = tr.find("input[tag='costPrice']").val();
                    var number = tr.find("input[tag='number']").val();
                    //计算小计
                    var amount = costPrice * number;
                    tr.find("span[tag='amount']").html(amount.toFixed(2));
                })

                .on("click", ".searchproduct", function () {
                    //拿到当前的行
                    var tr = $(this).closest("tr");
                    //点击放大镜,弹出子窗口
                    $.dialog.open("/product/listView.do", {
                        title : "选择商品",
                        width : "85%",
                        height : "85%",
                        lock : true,
                        resize : false,
                        //给子窗口的关闭绑定一个点击事件
                        close : function () {
                            //拿到共享过来的数据
                            var product = $.dialog.data("obj");
                            //销毁数据,防止第二次点击还有数据传过来
                            $.dialog.removeData("obj");
                            //如果有商品,给数据设置值
                            if (product) {
                                tr.find("input[tag='name']").val(product.name);
                                tr.find("input[tag='pid']").val(product.id);
                                tr.find("span[tag='brand']").html(product.brandName);
                                tr.find("input[tag='costPrice']").val(product.costPrice);
                                tr.find("input[tag='number']").val(1);
                                tr.find("span[tag='amount']").html(product.costPrice.toFixed(2));
                            }
                        }
                    });
                });

            //点击确定按钮,重新编排索引
            $(".btn_submit").click(function () {
                //判断至少需要一条明细
                if (!$("#edit_table_body tr input[tag='pid']").val()) {
                    showDialog("至少需要一条明细");
                    return;
                }

                //拿到所有的明细
                $.each($("#edit_table_body tr"), function (index, ele) {
                    $(ele).find("input[tag='pid']").prop("name", "items["+ index +"].product.id");
                    $(ele).find("input[tag='costPrice']").prop("name", "items["+ index +"].costPrice");
                    $(ele).find("input[tag='number']").prop("name", "items["+ index +"].number");
                    $(ele).find("input[tag='remark']").prop("name", "items["+ index +"].remark");
                });

                //提交表单
                $("#editForm").submit();

            });
            


        });
    </script>
</head>
<body>
<form id="editForm" action="/stockIncomeBill/saveOrUpdate.do" method="post">
    <input type="hidden" name="id" value="${entity.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">采购单编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">采购单编码</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${entity.sn}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">仓库</td>
                    <td class="ui_text_lt">
                        <select class="ui_select03 depot" name="depot.id">
                            <c:forEach var="s" items="${depots}">
                                <option value="${s.id}">${s.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <script type="text/javascript">
                    $(".depot option[value='${entity.depot.id}']").prop("selected", true);
                </script>
                <tr>
                    <fmt:formatDate var="vdate" value="${entity.vdate}"/>
                    <td class="ui_text_rt" width="140">业务时间</td>
                    <td class="ui_text_lt">
                        <input name="vdate" value="${vdate}" class="ui_input_txt02 Wdate"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">明细</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加明细" class="ui_input_btn01 appendRow"/>
                        <table class="edit_table" cellspacing="0" cellpadding="0" border="0">
                            <thead>
                            <tr>
                                <th width="10"></th>
                                <th width="170">货品</th>
                                <th width="100">品牌</th>
                                <th width="80">价格</th>
                                <th width="80">数量</th>
                                <th width="100">金额小计</th>
                                <th width="180">备注</th>
                                <th width="120"></th>
                            </tr>
                            </thead>
                            <tbody id="edit_table_body">
                            <c:choose>
                                <c:when test="${empty entity.items}">
                                    <%--一条没有数据的模板--%>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <input disabled readonly class="ui_input_txt01" tag="name"/>
                                            <img src="/images/common/search.png" class="searchproduct"/>
                                            <input type="hidden" tag="pid"/>
                                        </td>
                                        <td><span tag="brand"></span></td>
                                        <td><input type="number" tag="costPrice" class="ui_input_txt01"/></td>
                                        <td><input type="number" tag="number" class="ui_input_txt01"/></td>
                                        <td><span tag="amount"></span></td>
                                        <td><input tag="remark" class="ui_input_txt01"/></td>
                                        <td>
                                            <a href="javascript:;" class="removeItem">删除明细</a>
                                        </td>
                                    </tr>
                                </c:when>
                                <c:otherwise>
                                    <c:forEach items="${entity.items}" var="item">
                                        <tr>
                                            <td></td>
                                            <td>
                                                <input disabled readonly class="ui_input_txt01" tag="name" value="${item.product.name}"/>
                                                <img src="/images/common/search.png" class="searchproduct"/>
                                                <input type="hidden" tag="pid" value="${item.product.id}"/>
                                            </td>
                                            <td><span tag="brand">${item.product.brandName}</span></td>
                                            <td><input type="number" tag="costPrice" class="ui_input_txt01" value="${item.costPrice}"/></td>
                                            <td><input type="number" tag="number" class="ui_input_txt01" value="${item.number}"/></td>
                                            <td><span tag="amount">${item.amount}</span></td>
                                            <td><input tag="remark" class="ui_input_txt01" value="${item.remark}"/></td>
                                            <td>
                                                <a href="javascript:;" class="removeItem">删除明细</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </c:otherwise>
                            </c:choose>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="button" value="确定保存" class="ui_input_btn01 btn_submit"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>
